@charset "UTF-8";
// 加粗
.bold { font-weight: bold; }
.normal { font-weight: normal; }
// 行高
.lh1 { line-height: 1; }
.lh1_5 { line-height: 1.5; }
.lh2 { line-height: 2; }
.lh2_5 { line-height: 2.5; }
.lh3 { line-height: 3; }
// 对齐方式
.tc { text-align: center; }
.vc { vertical-align: middle; }
.tl { text-align: left; }
.tr { text-align: right; }
// 鼠标
.pointer { cursor: pointer }
// box
.inline { display: inline; }
.block { display: block; }
.inline-block { display: inline-block; }
.none { display: none; }
// 不换行
.nowrap { white-space: nowrap; }
// 文字超出，后面...隐藏，视情况与.nowrap配合使用
.text-over-hidden { overflow: hidden; text-overflow: ellipsis; }
// 圆角
.radius3 { border-radius: 3px; }
.radius5 { border-radius: 5px; }
.radius10 { border-radius: 10px; }
.radius20 { border-radius: 20px; }
.radius-circle { border-radius: 5000px; }
// 边界
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
// 阴影
.shadow1 { box-shadow: 0 0 5px rgba(0, 0, 0, .1); }
.shadow2 { box-shadow: 0 0 10px rgba(0, 0, 0, .1); }
.shadow3 { box-shadow: 0 0 15px rgba(0, 0, 0, .2); }

// 文字大小
.em06 { font-size: 0.6em; }
.em07 { font-size: 0.7em; }
.em08 { font-size: 0.8em; }
.em09 { font-size: 0.9em; }
.em11 { font-size: 1.1em; }
.em12 { font-size: 1.2em; }
.em13 { font-size: 1.3em; }
.em14 { font-size: 1.4em; }
.em15 { font-size: 1.5em; }
.em16 { font-size: 1.6em; }
.em17 { font-size: 1.7em; }
.em18 { font-size: 1.8em; }
.font12 { font-size: 12px; }
.font13 { font-size: 13px; }
.font14 { font-size: 14px; }
.font15 { font-size: 15px; }
.font16 { font-size: 16px; }
.font18 { font-size: 18px; }
.font20 { font-size: 20px; }
.font22 { font-size: 22px; }
.font24 { font-size: 24px; }
.font26 { font-size: 26px; }
.font28 { font-size: 28px; }
.font30 { font-size: 30px; }
.font40 { font-size: 40px; }
.font50 { font-size: 50px; }
.font60 { font-size: 60px; }

// 颜色，此颜色不会动态跟随主题色，慎用
.text-danger { color: @colorError !important; }
.text-primary { color: @colorPrimary !important; }
.text-success { color: @colorSuccess !important; }
.text-warning { color: @colorWarning !important; }
.text-info { color: @colorInfo !important; }
.text-gray { color: gray !important; }
.text-gray2 { color: #ccc !important; }
.text-white { color: white !important; }
.text-black { color: black !important; }
.bg-danger { background-color: @colorError !important; }
.bg-danger-20 { background-color: fade(@colorError, 20) !important; }
.bg-danger-50 { background-color: fade(@colorError, 50) !important; }
.bg-warning { background-color: @colorWarning  !important; }
.bg-warning-20 { background-color: fade(@colorWarning, 20)  !important; }
.bg-warning-50 { background-color: fade(@colorWarning, 50)  !important; }
.bg-primary { background-color: @colorPrimary  !important; }
.bg-primary-20 { background-color: fade(@colorPrimary, 20)  !important; }
.bg-primary-50 { background-color: fade(@colorPrimary, 50)  !important; }
.bg-success { background-color: @colorSuccess !important; }
.bg-success-20 { background-color: fade(@colorSuccess, 20) !important; }
.bg-success-50 { background-color: fade(@colorSuccess, 50) !important; }
.bg-gray { background-color: gray !important; }
.bg-gray2 { background-color: #ccc !important; }
.bg-white { background-color: white !important; }
.bg-black { background-color: black !important; }

// 默认间距
@spacing-x: 14px;
@spacing-y: 12px;
.ma { margin: @spacing-x @spacing-y; }
.mt { margin-top: @spacing-x; }
.mb { margin-bottom: @spacing-x; }
.ml { margin-left: @spacing-y; }
.mr { margin-top: @spacing-y; }
.pa { padding: @spacing-x @spacing-y; }
.pt { padding-top: @spacing-x; }
.pb { padding-bottom: @spacing-x; }
.pl { padding-left: @spacing-y; }
.pr { padding-right: @spacing-y; }

// 其他间距
@spaces: {
  p: padding;
  m: margin;
}
@directions: {
  t: top;
  r: right;
  b: bottom;
  l: left;
}
@sizes: {
  2: 2px;
  4: 4px;
  5: 5px;
  6: 6px;
  8: 8px;
  10: 10px;
  15: 15px;
  20: 20px;
  25: 25px;
  30: 30px;
  35: 35px;
  40: 40px;
}
each(@spaces, .(@sv, @sk, @si) {
  each(@sizes, .(@zv, @zk, @zi) {
    .@{sk}a@{zk} { @{sv}: @zv; }
    .@{sk}x@{zk} { @{sv}-left: @zv;@{sv}-right: @zv; }
    .@{sk}y@{zk} { @{sv}-top: @zv;@{sv}-bottom: @zv; }
    each(@directions, .(@dv, @dk, @di) {
      .@{sk}@{dk}@{zk} { @{sv}-@{dv}: @zv; }
    })
  })
})

// 百分比宽度
.w5p { width: 5%; }
.w10p { width: 10%; }
.w15p { width: 15%; }
.w20p { width: 20%; }
.w30p { width: 30%; }
.w40p { width: 40%; }
.w50p { width: 50%; }
.w60p { width: 60%; }
.w70p { width: 70%; }
.w80p { width: 80%; }
.w90p { width: 90%; }
.w100p { width: 100%; }

// flex 布局
.flex-x { display: flex; }
.flex-x.x-top { align-items: flex-start; }
.flex-x.x-middle { align-items: center; }
.flex-x.x-bottom { align-items: flex-end; }
.flex-x.x-center { justify-content: center; }
.flex-x.x-around { justify-content: space-around; }
.flex-x.x-between { justify-content: space-between; }
.flex-x.x-stretch { justify-content: stretch; }
.flex-x.x-end { justify-content: flex-end; }
.flex-y { display: flex; flex-direction: column; }
.flex-y.y-left { align-items: flex-start; }
.flex-y.y-middle { align-items: center; }
.flex-y.y-right { align-items: flex-end; }
.flex-y.y-center { justify-content: center; }
.flex-y.y-around { justify-content: space-around; }
.flex-y.y-between { justify-content: space-between; }
.flex-y.y-stretch { justify-content: stretch; }
.flex-y.y-end { justify-content: flex-end; }
.flex-auto { flex: auto; }
.flex-wrap { flex-wrap: wrap; }
.flex-x-center { display: flex; flex-direction: row; align-items: center; justify-content: center; }
.flex-x-around { display: flex; flex-direction: row; align-items: center; justify-content: space-around; }
.flex-x-between { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.flex-y-center { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.flex-y-around { display: flex; flex-direction: column; align-items: center; justify-content: space-around; }
.flex-y-between { display: flex; flex-direction: column; align-items: center; justify-content: space-between; }

// 背景高斯模糊
@supports (-webkit-backdrop-filter: saturate(180%) blur(20px)) or (backdrop-filter: saturate(180%) blur(20px)) {
  // 背景白色高斯模糊
  .bg_white_backdrop {
    background-color: rgba(255, 255, 255, .7) !important;
    backdrop-filter: saturate(180%) blur(20px);
  }
  // 背景黑色高斯模糊
	.bg_black_backdrop {
    background-color: rgba(0, 0, 0, .7) !important;
	  backdrop-filter: saturate(180%) blur(20px);
	}
}
